<script setup>
import {useRoute, useRouter} from "vue-router";
import {getCurrentInstance, ref} from "vue";
import {ElMessage} from "element-plus";

const router = useRouter()
const route = useRoute()

const toLogin = () => {
  router.push({path:"/login"})
}
//http请求
const proxy = getCurrentInstance()?.proxy;



const dataForm = ref({
  "account": "",
  "password": "",
  "rePassword": "",
})


const registerHandler = () => {
  proxy?.$http.post(`/app/cduser/register`,dataForm.value).then(result => {
    console.log(result)
    if (result.data.code != 0) {
      ElMessage({
        showClose: true,
        message: result.data.msg,
        type: 'error',
      })
      return;
    }else {
      router.push({path:"/login"})
    }
  }).finally(() => {
  });
}


</script>

<template>
<div class="register-container">
  <div class="r-top">
    接码平台-登录
  </div>

  <el-card class="card-container">
    <el-form label-width="120px" v-model="dataForm">
      <el-form-item label="* 登录账号">
        <el-input v-model="dataForm.account" />
      </el-form-item>
      <el-form-item label="* 登录密码">
        <el-input  v-model="dataForm.password" />
      </el-form-item>
      <el-form-item label="* 再次输入密码">
        <el-input v-model="dataForm.rePassword" />
      </el-form-item>
    </el-form>
  </el-card>

  <div class="btn" @click="registerHandler">
    注册
  </div>

  <div class="back-login" @click="toLogin">
    返回登录
  </div>

</div>
</template>

<style scoped lang="scss">
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .back-login {
    width: 50%;
  }
  .card-container {
    width: 50%;
  }
  .btn {
    margin-top: 60px;
    margin-bottom: 40px;
    width: 50%;
    background-color: #e91e63;
    color: hsl(0,0%,100%);
    height: 53px;
    font-size: 17px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-weight: normal;
    outline: 0!important;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 10px;
    letter-spacing: .08em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color .4s ease,color .4s ease;
  }
  .r-top {
    width: 100%;
    background-color: #e91e63;
    color: hsl(0,0%,100%);
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    height: 120px;
  }
}
</style>
